<template>
    <div class="main">
        <!-- 查询区 -->
        <div class="search">
            <el-form :inline="true" :model="ad" ref="searchfromat">
                <el-form-item label="编号" prop="adminId">
                    <el-input placeholder="请输入管理员编号" v-model="ad.adminId" />
                </el-form-item>
                <el-form-item label="姓名" prop="adminName">
                    <el-input placeholder="请输入管理员姓名" v-model="ad.adminName" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select placeholder="请选择管理员性别" style="width:160px" v-model="ad.sex">
                        <el-option label="不限" value="" />
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号：" prop="phone">
                    <el-input placeholder="请输入管理员手机号" v-model="ad.phone" />
                </el-form-item>
                <el-form-item label="出生日期：" prop="birthdayR">
                    <el-date-picker type="daterange" start-placeholder="起始日期" end-placeholder="截止日期"
                        v-model="ad.birthdayR" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <el-input placeholder="请输入角色" v-model="ad.role" />
                </el-form-item>
                <el-form-item label="备注" prop="description">
                    <el-input placeholder="请输入管理员的备注" v-model="ad.description" />
                </el-form-item>
            </el-form>
        </div>
        <!-- 按钮 -->
        <div class="action">
            <el-button type="primary" :icon="CirclePlus" @click=addnew>新增</el-button>
            <el-button type="primary" :icon="Edit"@click=editadmin>修改</el-button>
            <el-button type="primary" :icon="Search" @click="search">查询</el-button>
            <el-button type="primary" :icon="Refresh" @click="restform">重置</el-button>
            <el-button type="danger" :icon="Delete" @click="deltab">删除</el-button>
        </div>
        <!-- 表格 -->
        <div class="grid">
            <el-table :data="tableData" border style="width: 100%"  :header-cell-style="headerCellStyle"
                @row-click="rowclick" ref="tabfact">
                <el-table-column type="selection" width="55" align="center" header-align="center" />
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="adminId" label="编号" width="120" />
                <el-table-column prop="adminName" label="姓名" />
                <el-table-column prop="picture" label="头像" width="180" align="center">
                        <template #default="scope">
                            <div class="row-avatar" :style="'background-image:url('+scope.row.picture+')'"></div>
                        </template>
                    </el-table-column>
                <el-table-column prop="sex" label="性别" width="55" />
                <el-table-column prop="birthday" label="出生日期" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="role" label="角色" />
                <el-table-column prop="description" label="备注" />
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination v-model:current-page="pi.pageNo" v-model:page-size="pi.pageSize"
                    :page-sizes="[10, 15, 30, 50]" :total="pi.total" layout="total, sizes, prev, pager, next, jumper"
                    background @change="paginate" />
            </div>
        </div>
        <!-- 新增删除表单 -->
        <el-dialog v-model="show" :title="title" width="800" draggable :close-on-click-modal="false"  @close="close" style="margin-bottom: 5px;text-align: center;">
            <el-form :model="aeform" ref="sfRef">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="管理员编号：" label-width="100" prop="adminId" >
                            <el-input v-model="aeform.adminId" placeholder="请输入管理员编号" />
                        </el-form-item>
                        <el-form-item label="管理员姓名：" label-width="100" prop="adminName">
                            <el-input v-model="aeform.adminName" placeholder="请输入管理员姓名" />
                        </el-form-item>
                        <el-form-item label="管理员性别：" label-width="100" prop="sex">
                            <el-select v-model="aeform.sex" placeholder="请选择管理员性别">
                                <el-option label="男" value="男" />
                                <el-option label="女" value="女" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="管理员密码：" label-width="100" prop="password">
                            <el-input v-model="aeform.password" placeholder="请输入管理员密码" />
                        </el-form-item>
                        <el-form-item label="出生日期：" label-width="100" prop="birthday">
                            <el-date-picker v-model="aeform.birthday" type="date" placeholder="请输入出生日期"
                                style="width:100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="头像：" label-width="100" prop="picture">
                            <el-upload class="avatar" action="/api/uploads/avatar" :show-file-list="false"
                                :on-success="avatarSuccess">

                                <div class="preview" v-if="aeform.picture" :style="'background-image:url(' + aeform.picture + ')'">
                                </div>

                                <el-icon class="icon" v-else>
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </el-form-item>
                        <el-form-item  label-width="100">
                        
                        </el-form-item>
                        <el-form-item label="手机号：" label-width="100" prop="phone">
                            <el-input v-model="aeform.phone" placeholder="请输入手机号" />
                        </el-form-item>
                        
                
                    </el-col>
                    
                </el-row>
                
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="管理员职位：" label-width="100" prop="role">
                            <el-input v-model="aeform.role" placeholder="请输入管理员职位" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注：" label-width="100" prop="description">
                            <el-input v-model="aeform.description" style="width: 100%;" :rows="7" type="textarea"
                                placeholder="请输入备注信息" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 对话框的按钮。插槽 -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="show = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">确认</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<script setup>
import { findall, deleteids ,addall,updateal} from "@/api/AdminApi.js";
import { ref, onMounted, toRaw ,nextTick} from "vue";
import { Delete, Edit, Search, Refresh, CirclePlus,Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
onMounted(() => {
    search();
});
//可多选
let tabfact;
function rowclick(row) {
    tabfact.toggleRowSelection(row);
}
//上传头像
//头像上传成功时的回调函数
function avatarSuccess(resp, file) {
    //console.log(resp);
    if (resp.success) {
        aeform.value.picture = resp.url;
    }
}







//删除
function deltab() {
    //获取的是代理
    let r = tabfact.getSelectionRows();
    //获取数组
    let ids = [];
    r.forEach(i => {
        ids.push(toRaw(i).id)
    });
    //console.log(ids);
    DeleteAll(ids);
}
function DeleteAll(ids) {
    if (ids.length === 0) {
        ElMessage({
            message: "请选择要删除的行",
            type: "warning"
        });
    } else {
        ElMessageBox.confirm(
            "您确定要删除吗？",
            "确认", {
            type: 'warning',
        }
        ).then(async () => {
            let resp = await deleteids(ids);
            if (resp.success) {
                ElMessage({
                    message: "删除成功",
                    type: "success"
                });
                //成功之后刷新
                search();
            } else {
                ElMessage({
                    message: "删除失败,请联系管理员",
                    type: "error"
                });
            }
        })
    }
}
let title=ref("新增管理员");
//新增
let aeform = ref({
    adminId: "",
    adminName: "",
    sex: "",
     password:"",
    birthday: "",
    phone: "",
    role: "",
    picture:"",
    description: "",
})
let show = ref(false);
function addnew() {
    show.value = true;
    title.value='新增管理员'
}
function submitForm(){
    //console.log(aeform);
    let adminadd=toRaw(aeform.value);
    //console.log(adminadd);
    if(adminadd.id){//修改
        submitEdit(adminadd);
    }else{//新增
        submitadd(adminadd);
    }
}
async function submitadd(adminadd){
    let resp= await addall(adminadd);
    if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请联系管理员或检查数据是否异常',
            type: 'error',
        });
        // search();
        // show.value = false;
    }
}
//修改
function editadmin(){
    let rows = tabfact.getSelectionRows();
    if (rows.length === 0) {
        ElMessage({
            message: '请选中您要修改的行',
            type: 'warning',
        });
    } else if (rows.length > 1) {
        ElMessage({
            message: '您一次只能修改一行',
            type: 'warning',
        });
    } else {
       // console.log(toRaw(rows[0]));
        editRow(toRaw(rows[0]));
    }
}
//修改某个管理员
function editRow(row) {
    //浅克隆
    row = Object.assign({}, row);
   // console.log(row);
    show.value = true;
    title.value='修改管理员';

    //放到下一个时间滴答中赋值
    nextTick(() => {
        aeform.value = row;//给新增/修改表单赋值
    });
   // console.log(aeform);
}

let sfRef;//新增和修改表单的实例引用
//关闭对话框时触发此事件
function close() {
    sfRef.resetFields();//重置表单
}
async function submitEdit(ad) {
    //向后台提交数据
    let resp = await updateal(ad);

    if (resp.success) {
        ElMessage({
            message: '操作已成功',
            type: 'success',
        });
        search();
        show.value = false;
    } else {
        ElMessage({
            message: '操作失败，请稍候再试或联系管理员',
            type: 'error',
        });
    }
}





const tableData = ref();
//查询 //条件查询
async function search() {
    let params = ad.value;
    let resp = await findall(pi.value.pageNo, pi.value.pageSize, params);
    tableData.value = resp.data;
    pi.value = resp.pi;

}
//底部分页条
const pi = ref({
    pageNo: 1,
    pageSize: 10,
    total: 0,
});
//分页点击事件
function paginate() {
    search();
}
//表头颜色
function headerCellStyle() {
    return {
        backgroundColor: "#B3CAD8",
        textAlign: "center",
        color: "#fff"
    }
}
//表单内容
let ad = ref({
    id: "",
    adminId: "",
    adminName: "",
    picture:"",
    sex: "",
    // password:"",
    birthdayR: "",
    phone: "",
    role: "",
    description: "",
})
//重置
let searchfromat;
function restform() {
    searchfromat.resetFields();
    search();
}





</script>
<style scoped>
.action{
    margin-bottom: 5px;
}
.avatar {
    width: 170px;
    height: 170px;
    border: 1px solid #ccc;
}
.avatar .icon {
    width: 170px;
    height: 170px;
}
.avatar .preview {
    width: 170px;
    height: 170px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.row-avatar {
    width: 90px;
    height: 90px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
}

</style>
